A Practical Tutorial for the 3D Web Folks…(continued)
Hi, and welcome back to the final edition of "From Another Perspective." This month, the final month of my column, we'll be picking up where we left off last month: constructing a glowing 3D button for your web site.
 
Let's Wrap Her Up, Shall We?
Last month we left off having rendered and saved various button images. If you need a refresher, refer to last month's column. This month, we're going to slice the renderings up and drop them into GoLive Cyber Studio as a button object so when the mouse rolls over, they'll light up, just crying to be clicked.
 
 
Into Photoshop…
As mentioned so many other times, Photoshop is nearly indispensable in your digital imaging endeavors. If you don't have it, get it. In this case, I'll be describing how to use Photoshop (version 4, mind you) to work on our images.
There are two main things to remember:
1. When you're using graphics on the web, they should be as efficient as possible. Notice I did not say as "small" as possible. There's a difference. Each case is a judgment call: the proper balance of decent image quality vs. a small file. I can't give you a concrete rule as to how small or large a file should be, but I will tell you this:
2. When you're doing something like this, the smaller the image, the better. The reason is, your web browser is having to swap out files when the mouse travels over the button. So instead of 1 button, you're really forcing your visitors to download two: one for the regular appearance, and one for the mouse-over version. So what, you say? Well, if you have a fast reader and they want to click your button before the glow is finished coming in, the whole effect will be lost. The other side to this download speed issue, though, is that if you put very poor images up just to keep them small, what do you really gain? A visitor to your site gets to view those very poor images very quickly. No bang for the buck.
Okay, this isn't Y2K or anything, but still… if you're going to do something like this you may as well do it right. Evaluate each case carefully.
I start by bringing the image into Photoshop and bringing up the layers palette (F7). Duplicate the "Background" layer by dragging it onto the little turned up page icon at bottom of the layers palette (the one right next to the trash). This will create another layer directly atop the Background. Double-click on the new layer. This brings up a dialog that allows you to specify different attributes of the layer. Rename it something like Top Button and close the dialog. Now we're going to drop out the white background and the chrome collar around the button.
If you remember when we rendered, we had you create an image that was a button only, no collar. Open that image and copy the alpha channel mask to the rendering with the collar (go the Channel Options little arrow in the upper right corner of the Channels palette and selected Duplicate channel, then specify which document you'd like to copy the channel to). This channel defaults to Channel 5. If you did everything right, this mask will line up perfectly with the button in the other rendering, allowing you to create a layer with just the button, not the collar. You'll use this channel to delete the chrome collar on the very top layer. In Photoshop, hit Command-Option 5. This loads Channel 5, your button's newly acquired alpha mask, as a selection.
Note:
This keystroke combination works with any channel. If you hit Command-Option 4, you'll load the other alpha channel as a selection because that's what number it is designated in the channels palette. It's a nifty and fast shortcut.
Basically, what you'll do is create three layers in your document. The top layer will be the button only (no background or collar). The second down will be a duplicate of this layer which will serve as the glow layer. The third layer will be the background.
Now save your file.
Note:
Photoshop won't let you overwrite your original rendering in this case because by creating new layers, you've altered the original PICT file format into a Photoshop file, the only file format that preserves and understands what layers are. So in this case if you just hit Save, you would have gotten a dialog that says, "What would you like to name your new Photoshop document?" Don't get in the habit of this, though.
With your 3 layers (2 layers and your original background which technically isn't really a layer), you're now ready to create your glows and such. Your top button layer will be your safe layer which you'll do nothing to. It's fine how it is. Your second layer will be your glowing layer. Command-click on the layer in the layers palette. This selects everything that's on the layer, but only where there is pixel information. Because we have deleted the background and chrome collar, there's only the shape of the button to select.
Now we'll stroke the button, creating the beginnings of a glow. Pick a nice bright yellow, or whatever color you'd like your glow to be from the color palette. When you click a color, that color becomes your foreground color.
Note:
If you had Option-clicked a color, it would have become your background color instead.
With your button selected (see the little marching ants?), go to Edit/Stroke. A dialog box comes up with a variety of options. Type in a 8 and set the stroke to Center. This puts 4 pixels inside the selection and 4 pixels outside. Now look at your image. It should have a yellow band around the button. With the button still selected, and yellow still your foreground color, hit Option-Delete. This fills your selection with the foreground color. Now you have a yellow button with a yellow halo around it. Hide the top, safe button by clicking the eye to the left of the layer to see.
Now you'll blur the yellow glow button. Make sure you deselect everything (Command-D), and with your yellow-button layer still hi-lighted and visible, go to Filter/Blur/Gaussian Blur. Set the blur value to about 4. This will provide a nice, soft edge around your glow.
Now make your top, safe button visible again and you'll begin to get an idea what it's going to look like. Try a "mock mouse-over" move by leaving the top button layer visible, and alternate hiding and exposing the yellow glow layer beneath it. This simulates your desired effect on the web.
If everything looks good, save your work. Now comes the surgery.
Hold down the Marquee selection tool and you'll get a fly-out menu. The last tool is the cropping tool. Drag a selection around your work and cut out all that's unnecessary. Remember, the smaller the file, the better. Enlarge your file (Command-+) to see the end of your blurred, yellow pixels).
Note:
Crop enough so you don't get a straight cut in your nice, soft blur.
Now we'll ad our type. With white as your foreground color (click on the little black and white stacked squares down by your Foreground/Background colors in the tool palette. This automatically resets your colors to black in front and white in back. The little curved arrow allows you to alternate back and forth, white foreground-black background, etc.). Select the type tool and click on your image. This brings up a new layer. Type in your desired words and hit OK. Now make black your foreground layer , click the type tool and hit OK (the same words will be in your text field so you don't have to re-type them in). You've just created a white and black version of your words. Drag the white to the top in the layers palette, and the black just beneath it. Now offset the black slightly down and to the right. With the black type layer selected, go to Filter/Other/Offset and type in something like 2 and 3 pixels. Close the window
Note:
This is an extremely handy filter because it allows you to precisely match the amount of offset from layer to layer if you were doing many different type versions. If you were just going to do one, you could have clicked and dragged on the layer itself in the document's window.
Now, resize your cropped image down to something like 50 by pixels on the longest dimension. You want the image to be as small as possible as mentioned earlier, but because you have bit-mapped text in your image now, you need to make sure it's readable. This prevents you from reducing the button as small you might otherwise.
Note:
If there were no type you could get away with half this size. Your rendering was completed and saved as a 32-bit RGB PICT file-8 bits each for three separate channels: red, green and blue, and a forth channel containing alpha information. This means that it's composed presently of millions of colors. By the time it makes it onto the web, it will be significantly reduced in its "pixel depth," but let's keep it at 32-bit for now. When re-sizing and manipulating the file, it's desirable to start with millions of colors to achieve the smoothest gradations possible. Converting the image to a GIF is just about the last step before loading the image into the authoring program.
Now you will export each portion of the image as a GIF file. First start with the non-glowing button. With the top button visible, hide the yellow glowing and go to File/Export/GIF89a Export. This brings up a dialog that allows you to determine your palette.
Note:
The Export feature in Photoshop operates independently of the save feature. Because of this, you should save your file before you start messing around with other things, but you don't have to keep doing "Save As…" files with all subtle variations. Export works faster and more efficiently for this.
For now, we'll export it as a Macintosh Adaptive palette, which basically means the color will suffer a bit to Windows viewers but hey, who cares (just kidding)? Instead of the default 256 colors, try messing around with fewer colors. Fewer colors means a smaller file. Notice the preview button in the bottom right of the Export window. Take a look at what your color selection produces by clicking this button. Name it something with no spaces in the title and save it to an appropriate directory. Now do the same thing for the version with the glow, naming it, of course, something different.
Repeat this process for as many glowing elements as you want on your web site. Now it's time for the final hurrah…
 
Into GoLive Cyber Studio
Launch GoLive and open a fresh document. Set your background to white (or whatever other color you may have picked as a background color in Photoshop). I like to start with a grid. In your palette, drag a grid into your empty page and resize it to fit about 600 x 500 pixels (size doesn't really matter for this application). Now go to your Cyber Objects tab, the third from the right. If you're not sure which is your Cyber Objects tab, run the pointer over the tabs (don't click) and you'll get a little message box. Now choose your "button object," the second icon from the left. Drag it into the grid. You'll get a little icon with a question mark. Look back in the Button Inspector and notice there are three icons: one each for Main, Over and Click. What you'll do is specify what image you want to swap in for each action. For main, navigate to your un-glowing button. For Over, navigate to your Glowing GIF file. If you want to get tricky, try inverting your main button back in Photoshop (Command-I) and saving that as the Click button. Now hit the Preview tab in GoLive and you're looking at some nifty glowing buttons.
That's it.
As you might notice, much of the work is done in your 3D program and in Photoshop. Once you get this process down, it goes very quickly. Don't let all the words scare you (Forgive me, but I don't know how much the average Photoshop user knows…).
There are all sorts of variations on this theme, of course, so feel free to explore with what you've learned. Try creating just a white button that simply exposes a button beneath when the mouse passes over it (not necessarily the easiest navigation theme, but…). Use your creativity!
It has been a real pleasure getting acquainted with you all. Please feel free to visit my web site (at http://www.cranedigital.com/ ) if you have any questions about 3D or graphics in general. We'll do our best to help them get answered. I'm currently working on a Perl program that will benefit those considering getting into the world of 3D, so please check in and see how it's coming.
This is John B. Crane from Crane Digital Media in Santa Fe, New Mexico saying, "until we meet again, happy rendering."
